<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.wrap{
			position: relative;
			width: 100%;
			height: 100%;
			background-color: #000;
		}
		.fj{
			width: 150px;
			height: 150px;
		}
		.fj1{
			position: absolute;
			top:-20px;
		}
		.fj2{
			position: absolute;
			bottom: 0;
		}
		.f2zd{
			position:absolute;
			display: none;
		}
		.f1zd{
			position:absolute;
			display: none;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<img src="./images/f1.png" alt="" class="fj1 fj">
		<img src="./images/f2.png" alt="" class="fj2 fj">
		<img src="./images/f2zd.png" alt="" class="f2zd">
		<img src="./images/f1zd.png" alt="" class="f1zd">
	</div>
	<script>
		var f1 = document.getElementsByClassName('fj1')[0]
		var f2 = document.getElementsByClassName('fj2')[0]
		var f2zd = document.getElementsByClassName('f2zd')[0]
		var f1zd = document.getElementsByClassName('f1zd')[0]
		var f1AtLeft = f1.getBoundingClientRect().left
		var f2AtLeft = f2.getBoundingClientRect().left 
		var spet = 10
		const keys = {};
		var f1Y = parseInt(f1.getBoundingClientRect().bottom-50)
		var f2Y = parseInt(f2.getBoundingClientRect().top)
		var f1X = 0
		var over = false
		 // 监听键盘按下事件
		 document.addEventListener('keydown', (event) => {
			 	if(over) return
				if(event.key==='ArrowUp'){
					f1zd.style.display='block'
					f1X = f1AtLeft+f1.getBoundingClientRect().width/2-f1zd.getBoundingClientRect().width/2
					f1Y = 130
				}
				if(event.key==='w'){
					f2zd.style.display='block'
					f2X = f2AtLeft+f2.getBoundingClientRect().width/2-f2zd.getBoundingClientRect().width/2
					f2Y = window.innerHeight-f2.getBoundingClientRect().height
				}
				keys[event.key] = true;
		});
		document.addEventListener('keyup', (event) => {
			if(over) return
			if(event.key!=='ArrowUp'&&event.key!=='w'){
				keys[event.key] = false;
			}
				
		});
		update()
		var timer;
		function update() {
			if (keys.w){
				var y2 = f2Y-=10
				if(y2<=0){
					f2zd.style.display='none'
					keys['w'] = false
					f2Y = window.innerHeight-f2.getBoundingClientRect().height
				}
				if(
					f2X>f1.getBoundingClientRect().left&&f2X<(f1.getBoundingClientRect().left+f1.getBoundingClientRect().width)&&
					y2>f1.getBoundingClientRect().top && y2<f1.getBoundingClientRect().bottom-40
					){
						f1.src='./images/zd.png'
						f2zd.style.display='none'
						keys['w'] = false
						cancelAnimationFrame(timer)
						over = true
					}
				f2zd.style.transform = 'translate('+f2X+'px,'+y2+'px)'
			}
			if (keys.a){
				if(f2AtLeft > 0){
					f2.style.transform= 'translateX('+(f2AtLeft-=spet)+'px)'
				}
			}
			if (keys.d){
				if(!(f2AtLeft >= window.innerWidth-170)){
					f2.style.transform= 'translateX('+(f2AtLeft+=spet)+'px)'
				}
			}

			if (keys.ArrowUp){
				var y = f1Y+=10
	
				if(y>=window.innerHeight){
					f1zd.style.display='none'
					keys['ArrowUp'] = false;
					f1Y = 130
				}

				if(
					f1X>f2.getBoundingClientRect().left&&f1X<(f2.getBoundingClientRect().left+f2.getBoundingClientRect().width)&&
					y>f2.getBoundingClientRect().top && y<f2.getBoundingClientRect().bottom
					){
						f2.src='./images/zd.png'
						f1zd.style.display='none'
						keys['ArrowUp'] = false
						cancelAnimationFrame(timer)
						over = true
					}

				f1zd.style.transform = 'translate('+f1X+'px,'+y+'px)rotate(180deg)'
			}
			if (keys.ArrowLeft){
				if(f1AtLeft > 0){
					f1.style.transform= 'translateX('+(f1AtLeft-=spet)+'px)'
				}
			}
			if (keys.ArrowRight){
				if(!(f1AtLeft >= window.innerWidth-170)){
					f1.style.transform= 'translateX('+(f1AtLeft+=spet)+'px)'
				}
			}
			timer =	requestAnimationFrame(update);
		}
	</script>
</body>
</html>